<template>
  <div class="container">
    <div class="left">
      <div class="left-top">
        <div class="top-item" @click="flowList()">
          <!-- <div class="top-item" @click="go('AiHomework')"> -->
          <div class="item-img">
            <img src="../../../assets/teacher_images/sportWork3.png" alt="" />
          </div>
          <div class="item-title">跟着学</div>
        </div>
        <div class="top-item" @click="go('follow')">
          <div class="item-img">
            <img src="../../../assets/teacher_images/sportWork4.png" alt="" />
          </div>
          <div class="item-title">AI体锻作业</div>
        </div>
        <div class="top-item" @click="go('plan')">
          <div class="item-img">
            <img src="../../../assets/teacher_images/sportWork2.png" alt="" />
          </div>
          <div class="item-title">计划作业</div>
        </div>
        <div class="top-item" @click="work()">
          <div class="item-img">
            <img src="../../../assets/teacher_images/sportWork1.png" alt="" />
          </div>
          <div class="item-title">自定义作业</div>
        </div>
      </div>

      <el-card class="box-card2" ref="boxCard2Container" v-if="show == 1">
        <div class="loading-dialog" v-if="isLoading" v-loading="true"></div>
        <div class="header">
          <div class="title">最近作业</div>
          <!-- <div class="more">查看全部</div> -->
        </div>
        <div class="box-card2-list">
          <div
            class="nullSource"
            v-if="!tableData.length"
            style="
              width: 40vw;
              height: 40vh;
              display: flex;
              margin:auto
              align-items: center;
            "
          >
            <img
              src="../../../assets/course_img/nullSouceShow.png"
              style="width: 100%; height: 100%; object-fit: contain"
              alt=""
            />
          </div>
          <el-card
            class="card-list"
            v-for="(item, index) in tableData"
            :key="index"
          >
            <div class="title">
              <div class="time">
                <div class="date">{{ item.todayTime }}</div>
                <div class="project">项目：{{ item.sportInfo }}</div>
              </div>
              <div class="data">{{ item.createTime }} 发布</div>
            </div>
            <div class="info">
              <div class="class" div style="display: flex; min-width: 18vw">
                {{ item.classInfo }} 人
              </div>
              <div class="cardinfo">
                <div class="cardinfos">{{ item.commitStu }}人提交</div>
                <div class="cardinfos">{{ item.completionRate }} 完成率</div>
              </div>
              <!-- <div class="button" @click="go('newexamine')">检查作业</div> -->
              <div class="button" @click="toexamine(item)">检查作业</div>
            </div>
          </el-card>
        </div>
      </el-card>
      <el-card class="box-card2" ref="boxCard2Containers" v-if="show == 2">
        <div class="loading-dialog" v-if="isLoadings" v-loading="true"></div>
        <div class="header">
          <div class="title">跟着学作业</div>
          <div style="display: flex">
            <div
              style="margin-right: 1vw"
              class="more"
              @click="go('AiHomework')"
            >
              新建作业
            </div>
            <div class="more" @click="backlist()">返回</div>
          </div>
        </div>
        <div class="box-card2-list">
          <div
            class="nullSource"
            v-if="!tableDatas.length"
            style="
              width: 40vw;
              height: 40vh;
              display: flex;
              margin:auto
              align-items: center;
            "
          >
            <img
              src="../../../assets/course_img/nullSouceShow.png"
              style="width: 100%; height: 100%; object-fit: contain"
              alt=""
            />
          </div>
          <el-card
            class="card-list"
            v-for="(item, index) in tableDatas"
            :key="index"
          >
            <div class="title">
              <div class="time">
                <div class="date">{{ item.learningTaskName }}</div>
              </div>
              <div class="data">{{ item.createTime }} 发布</div>
            </div>
            <div class="info">
              <div style="display: flex; min-width: 18vw">
                <div class="class">{{ item.className }}</div>
                <div class="class">({{ item.stuCount }}人)</div>
              </div>
              <div class="cardinfo">
                <div class="cardinfos">{{ item.stuSubmit }}人提交</div>
              </div>
              <!-- <div class="button" @click="go('newexamine')">检查作业</div> -->
              <div class="button" @click="tonewlearningAssignments(item)">
                检查作业
              </div>
            </div>
          </el-card>
        </div>
      </el-card>
    </div>
    <div class="course_right">
      <div class="right-top">
        <div class="top-title">教学监管</div>
        <div class="top-tips">全方位追踪，助力科学管理</div>
        <img
          class="top-img"
          src="../../../assets/course_img/jianguan.png"
          alt=""
        />
      </div>
      <div class="right-menu">
        <div class="menu-title">常用工具</div>
        <div class="menu-list">
          <div class="list-val" @click="go('class')">
            <div class="val-icon">
              <!-- <i class="iconfont icon-banji"></i> -->
              <img
                class="top-img"
                src="../../../assets/course_img/class.png"
                alt=""
              />
            </div>
            <div class="val-text">我的班级</div>
          </div>
          <div class="list-val" @click="go('newstudyAssignments')">
            <div class="val-icon">
              <img
                class="top-img"
                src="../../../assets/course_img/gzx.png"
                alt=""
              />
            </div>
            <div class="val-text">跟着学计划</div>
          </div>
          <div class="list-val" @click="go('planList')">
            <div class="val-icon">
              <!-- <i class="iconfont icon-banji"></i> -->
              <img
                class="top-img"
                src="../../../assets/course_img/tyzy.png"
                alt=""
              />
            </div>
            <div class="val-text">体育作业计划</div>
          </div>

          <div class="list-val" @click="go('newfollowThePractice')">
            <div class="val-icon">
              <img
                class="top-img"
                src="../../../assets/course_img/aitd.png"
                alt=""
              />
            </div>
            <div class="val-text">AI体锻作业计划</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { viewHomework } from "@/api/sports/plan/index";
import { learningList } from "@/api/followThePractice/index.js";
export default {
  name: "WorkspaceJsonIndex",

  data() {
    return {
      show: 1,
      pageNum: 1,
      pageSize: 10,
      total: -1,
      tableData: [],
      isLoading: false,
      totals: -1,
      tableDatas: [],
      isLoadings: false,
    };
  },

  mounted() {
    this.getViewHomeworkList();
    if (this.$route.query.show == 2) {
      this.flowList();
      this.$router.replace({ query: {} });

    } else {
      this.backlist();
    
    }
    this.$nextTick(() => {
      this.$refs.boxCard2Container.$el.addEventListener(
        "scroll",
        this.handleScroll
      );
    });
    this.$nextTick(() => {
      this.$refs.boxCard2Containers.$el.addEventListener(
        "scroll",
        this.handleScrolls
      );
    });
  },
  beforeUnmount() {
    this.$refs.boxCard2Container.$el.removeEventListener(
      "scroll",
      this.handleScroll
    );
    this.$refs.boxCard2Containers.$el.removeEventListener(
      "scroll",
      this.handleScrolls
    );
  },
  methods: {
    backlist() {
      this.getViewHomeworkList();
      this.show = 1;
    },
    flowList() {
      this.getLearningList();
      this.show = 2;
    },
    handleScroll() {
      const boxCard2Container = this.$refs.boxCard2Container.$el;
      const scrollTop = boxCard2Container.scrollTop;
      const clientHeight = boxCard2Container.clientHeight;
      const scrollHeight = boxCard2Container.scrollHeight;
      if (scrollTop + clientHeight >= scrollHeight) {
        if (this.tableData.length < this.total) {
          console.log(11);
          this.pageNum++;
          this.getViewHomeworkList();
        }
      }
    },
    handleScrolls() {
      const boxCard2Containers = this.$refs.boxCard2Containers.$el;
      const scrollTop = boxCard2Containers.scrollTop;
      const clientHeight = boxCard2Containers.clientHeight;
      const scrollHeight = boxCard2Containers.scrollHeight;
      if (scrollTop + clientHeight >= scrollHeight) {
        if (this.tableDatas.length < this.totals) {
          this.pageNum++;
          this.getLearningList();
        }
      }
    },
    toexamine(item) {
      this.$router.push({
        path: "newexamine",
        query: {
          classId: item.classId,
          todayTime: item.todayTime,
        },
      });
    },
    tonewlearningAssignments(item) {
      this.$router.push({
        path: "newlearningAssignments",
        query: {
          learningWorkId: item.learningTaskId,
          classId: item.classId,
        },
      });
    },
    work() {
      this.$message("待开放");
    },
    go(url) {
      this.$router.push(url);
    },
    getLearningList() {
      this.isLoadings = true;
      let data = {
        userId: this.$store.state.user.USER_INFO.id,
        pageNum: 1,
        pageSize: 10,
      };
      learningList(data).then((res) => {
        if (res.code === 200) {
          this.isLoadings = false;
          this.tableDatas = this.tableDatas.concat(res.result);
          this.totals = res.total;
        }
      });
    },
    getViewHomeworkList() {
      this.isLoading = true;
      let data = {
        teacherId: this.$store.state.user.USER_INFO.id,
        type: "0",
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      };
      viewHomework(data).then((res) => {
        if (res.code === 200) {
          this.isLoading = false;
          this.tableData = this.tableData.concat(res.result);
          this.total = res.total;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.loading-dialog {
  width: 100%;
  height: 100%;
  border-radius: 4px;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.07);
  background: rgba(255, 255, 255, 0.2);
  position: absolute;
  top: 0;
  left: 0;
}
.container {
  display: flex;
  // padding: 26px 214px;
  padding: 0vh 10vw;
  box-sizing: border-box;
  .left-top {
    height: 8vh;
    background: #ffffff;
    margin-top: 3vh;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.07);
    border-radius: 4px;
    display: flex;
    justify-content: space-around;
    .top-item {
      display: flex;
      width: 20%;
      justify-content: center;
      align-items: center;
      padding: 0 1.5vw;
      cursor: pointer;
      .item-img {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        img {
          object-fit: contain;
          width: 50%;
          height: 50%;
        }
      }
      .item-title {
        margin-left: 0.2vw;
        font-size: 1vw;
        color: #333333;
        white-space: nowrap;
      }
    }
  }
  .box-card2 {
    width: 64vw;
    max-height: 70vh;
    height: 70vh;
    margin-top: 1.09vw;
    overflow-y: auto;
    position: relative;
    .header {
      display: flex;
      justify-content: space-between;
      .title {
        font-size: 0.93vw;
        font-weight: 600;
        color: #333333;
      }
      .more {
        cursor: pointer;
        font-size: 0.93vw;
        font-weight: 400;
        color: #1677ff;
      }
    }
    .box-card2-list {
      .card-list {
        margin-top: 1.24vw;
        width: 60.5;
        height: 14.6vh;
        .title {
          display: flex;
          justify-content: space-between;
          .time {
            display: flex;
            .date {
              font-size: 0.93vw;
              font-weight: 500;
              color: #333333;
            }
            .project {
              margin-left: 0.52vw;
              font-size: 0.82vw;
              font-weight: 400;
              color: #666666;
            }
          }
          .data {
            font-size: 0.93vw;
            font-weight: 500;
            color: #99998d;
          }
        }
        .info {
          line-height: 3.3vh;
          margin-top: 0.52vw;
          padding: 0.93vw;
          display: flex;
          width: 58.17vw;
          height: 6.7vh;
          background: #f0f8ff;
          border-radius: 0.21vw;
          justify-content: space-between;
          align-items: center;
          .class {
            font-size: 0.83vw;
            font-weight: 500;
            color: #333333;
          }
          .cardinfo {
            display: flex;
            .cardinfos {
              margin-left: 4.14vw;
              font-size: 0.83vw;
              font-weight: 400;
              color: #1677ff;
            }
          }
          .button {
            width: 5.91vw;
            height: 3.3vh;
            background: linear-gradient(90deg, #29d9ff, #2179ff);
            border-radius: 0.21vw;
            font-size: 0.93vw;
            font-weight: 500;
            color: #ffffff;
            text-align: center;
            cursor: pointer;
          }
        }
      }
    }
  }
  .course_right {
    width: 17%;
    margin-left: 3%;
    .right-top {
      position: relative;
      height: 8vh;
      border-radius: 4px;
      box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.07);
      background: #5ca0ff;
      margin-top: 3vh;
      display: flex;
      flex-direction: column;
      color: #ffffff;
      .top-title {
        font-weight: bold;
        font-size: 1vw;
        margin-top: 2vh;
        margin-left: 1vw;
      }
      .top-tips {
        font-weight: bold;
        font-size: 0.9vw;
        margin-top: 1vh;
        margin-left: 1vw;
        z-index: 2;
      }
      .top-img {
        position: absolute;
        right: 0;
        bottom: 0;
        z-index: 1;
      }
    }
    .right-menu {
      box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.07);
      background: #ffffff;
      margin-top: 2vh;
      border-radius: 4px;
      padding: 1vh 1vw;
      .menu-title {
        font-size: 1.2vw;
        color: #333333;
        font-weight: 500;
        margin-bottom: 2vh;
      }
      .menu-list {
        display: flex;
        flex-direction: column;
        .list-val {
          display: flex;
          align-items: center;
          padding-bottom: 1vh;
          padding-top: 1vh;
          cursor: pointer;
          position: relative;
          &::before {
            content: "";
            position: absolute;
            width: 100%;
            height: 0.1vh;
            background: #ececec;
            bottom: 0;
            transform: scaleX(0.7);
          }
          .val-icon {
            margin-left: 1vw;
            i {
              color: #1677ff;
              font-size: 1.5vw;
            }
          }
          .val-text {
            margin-left: 0.5vw;
            color: #333333;
            font-size: 1vw;
          }
        }
      }
    }
  }
}
</style>
